<template>
  <view
    class="stage"
    :style="{
      '--bgColor': bgColor,
      '--height': height,
      '--actvieColor': actvieColor,
      '--actvieBgColor': actvieBgColor,
    }"
  >
    <view
      v-for="(item, k) in list"
      :key="k"
      class="stage-item"
      :class="{ 'stage-item-active': k == current }"
      :style="{ '--color': color }"
      @click="changeStage(item, k)"
    >
      <text>{{ item[keyName] }}</text>
    </view>
    <view
      class="slider"
      :style="{
        width: 100 / list.length + '%',
        left: `${(100 / list.length) * current}%`,
        '--tail': current == 0 ? 'none' : 'block',
      }"
    />
  </view>
</template>
<script>
export default {
  props: {
    // 步骤列表
    list: {
      type: Array,
      default: () => [],
    },
    // 当前步骤
    current: {
      type: Number,
      default: 0,
    },
    // 显示字段名
    keyName: {
      type: String,
      default: "label",
    },
    // 是否显示箭头
    arrow: {
      type: Boolean,
      default: false,
    },
    // 高度
    height: {
      type: String,
      default: "94rpx",
    },
    // 背景颜色
    bgColor: {
      type: String,
      default: "#fff",
    },
    // 文本颜色
    color: {
      type: String,
      default: "#212121",
    },
    // 选中颜色
    actvieColor: {
      type: String,
      default: "#fff",
    },
    // 选中背景颜色
    actvieBgColor: {
      type: String,
      default: "#4ea770",
    },
  },
  data() {
    return {
      width: 0,
    };
  },
  mounted() {
    this.getSystemInfo();
    uni.onWindowResize(() => {
      this.getSystemInfo();
    });
  },
  methods: {
    // 计算宽度
    getSystemInfo() {
      const query = uni.createSelectorQuery().in(this);
      query
        .select(".stage")
        .boundingClientRect((rect) => {
          this.width = Math.floor((750 / 375) * (rect.width / this.list.length));
        })
        .exec();
    },
    // 切换步骤
    changeStage(item, index) {
      this.$emit("change", { ...item, index });
      this.$emit("update:current", index);
    },
  },
};
</script>
<style lang="scss" scoped>
.stage {
  --color: #212121;
  --bgColor: #fff;
  --actvieColor: #fff;
  --actvieBgColor: #4ea770;
  --height: auto;
  width: 100%;
  height: var(--height);
  white-space: nowrap;
  border-bottom: 2rpx solid #e6f1e9;
  display: flex;
  position: relative;
  &-item {
    flex: 1;
    font-size: 28rpx;
    height: 100%;
    color: var(--color);
    line-height: var(--height);
    background-color: var(--bgColor);
    display: inline-block;
    vertical-align: middle;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
    position: relative;
    transition: all 0.3s;
  }
  &-item-active {
    text {
      position: relative;
      color: var(--actvieColor);
      z-index: 9;
    }
  }
  .slider {
    --tail: none;
    position: absolute;
    background-color: var(--actvieBgColor);
    height: 100%;
    left: 0;
    transition: all 0.3s;
    &::before {
      display: var(--tail);
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      border-left: calc(var(--height) / 2) solid var(--bgColor);
      border-top: calc(var(--height) / 2) solid transparent;
      border-bottom: calc(var(--height) / 2) solid transparent;
      border-right: calc(var(--height) / 2) solid transparent;
    }
    &::after {
      content: "";
      position: absolute;
      top: 0;
      right: -93rpx;
      border-left: calc(var(--height) / 2) solid var(--actvieBgColor);
      border-top: calc(var(--height) / 2) solid transparent;
      border-bottom: calc(var(--height) / 2) solid transparent;
      border-right: calc(var(--height) / 2) solid transparent;
    }
  }
}
</style>
